前言

每一個應用程式都是一些非常簡單的任務開始：獲取數據、轉換數據，並把它們顯示給用戶。

我們有想要呈現的數據，但可能樣子很醜，造成用戶體驗很差，或著不是我們要的格式。比方說幾乎顯示日期 (2016-12-22) 而非原始字符串格式 (Thu Dec 22 2016 20:00:00 GMT+0800)。或著有時候想要把所有小寫字母，在顯示的時候變成都是大寫。

將小寫變成大寫：

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  // uppercase 為 Angular 內建
  template: '<p>My name is <strong>{{ name | uppercase }}</strong>.</p>',
})
export class AppComponent {
  name = 'john doe';
}

輸出結果會是 My name is JOHN DOE.

我們發現，應用程序中重複著上述相同的轉換非常多。解決方式可以用 TS 把數據做好轉換，再來呈現。也可以將這些轉換直接在 HTML 模板裡轉換。後者過程叫做管道(pipe)。

客製化通道

現在我們要做一個把每個單字第一個字母變成大寫的通道：
先定義我們的 Pipe

// capitalize.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
    if (!value) return value;

    return value.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }
}

接著使用我們的 Pipe

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<p>My name is <strong>{{ name | capitalize }}</strong>.</p>'
  // 用 capitalize 這個 pipe 來做轉換
})
export class AppComponent {
  name = 'john doe';
}

輸出結果會是 My name is John Doe.

App 通用的 Pipe

有些 Pipe 我們可能會一直用到，例如日期轉換、語言翻譯，這些可能在很多個 Components 中都有用到，我們能做到讓自己定義的 Pipe 就像一些內建的 Pipe 在每個 Component 中都可以使用。

一種方法是我們在 App Module 中引入我們寫好的 Pipe

// app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }   from './app.component';
import { CapitalizePipe } from './capitalize.pipe'; // 導入我們的 pipe

@NgModule({
  imports:      [ BrowserModule ],
  // 引入 capitalize pipe 
  declarations: [ AppComponent, CapitalizePipe ], 
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

這樣之後要用 Pipe 就不用每個 Component 都一一宣告囉！
Plurk 範例